<script setup>
import { ref, nextTick } from 'vue';
import { message } from 'ant-design-vue';
import Icon from '@ant-design/icons-vue';
import * as icons from '@ant-design/icons-vue';
import { menuListApi, deleteMenuApi } from '@/api/sys/menu.js';
import addOrUpdata from './components/menu-add-or-updata.vue';

defineOptions({
  name: 'sys-menu'
})

// 获取数据
const dataLoading = ref(false)
const menuList = ref([])
const columns = ref([
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '图标',
    dataIndex: 'icon',
    
  },
  {
    title: '类型',
    dataIndex: 'menuType',
  },
  {
    title: '排序',
    dataIndex: 'sort'
  },
  {
    title: '路由',
    dataIndex: 'url'
  },
  {
    title: '授权标识',
    dataIndex: 'permissions',
  },
  {
    title: '操作',
    dataIndex: 'operate'
  }
])
const init = () => {
  dataLoading.value = true
  menuListApi().then(({data:res}) => {
    const filterData = (list) => {
      list.forEach(item => {
        item.children = item.children.length ? item.children : null
        if (item.children) {
          filterData(item.children)
        }
      })
    }
    filterData(res.data)
    menuList.value = res.data
  }).finally(() => {
    dataLoading.value = false
  })
}
init()

// 新增修改删除菜单
const addOrUpdataRef = ref()
const showHide = ref(false)
const addOrUpdataHandl = (id, isEdit) => {
  showHide.value = true
  nextTick(() => {
    addOrUpdataRef.value.init(id, isEdit)
  })
}

const modalClose = (isData) => {
  showHide.value = false
  if (isData) {
    init()
  }
}

const deleteMenu = async (id) => {
  await deleteMenuApi(id)
  message.success('删除成功！')
  init()
}

</script>

<template>
  <div class="container">
    <div >
      <a-button v-authority="'sys:menu:save'" type="primary" @click="addOrUpdataHandl()">新增</a-button>
      
      <a-table 
        class="table-common" 
        :columns="columns" 
        :data-source="menuList" 
        rowKey="id" 
        bordered
        :pagination="false"
        :scroll="{ y: 630 }"
        :loading="dataLoading"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex==='icon' && record.icon">
            <Icon :component=icons[record.icon] />
          </template>

          <template v-if="column.dataIndex==='menuType'">
            <a-tag v-if="record.menuType===0" color="cyan">菜单</a-tag>
            <a-tag v-else color="blue">按钮</a-tag>
          </template>

          <template v-if="column.dataIndex==='operate'">
            <a-button v-authority="'sys:menu:save'" v-if="record.menuType===0" class="btn-primary" type="text" @click="addOrUpdataHandl(record)">新增</a-button>
            <a-button v-authority="'sys:menu:update'" type="text" @click="addOrUpdataHandl(record.id, true)">修改</a-button>
            <a-popconfirm
              title="确定删除该条数据吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteMenu(record.id)"
            >
              <a-button v-authority="'sys:menu:delete'" type="text" danger>删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
      <addOrUpdata ref="addOrUpdataRef" v-if="showHide" @modalClose="modalClose"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>